<template>
  <div class="DataPopUp">
    <div class="DataPopUp-frame">
      <div class="slope-data">
        <div class="slope-data__number">
          <span class="slope-data__number__text">边坡相关资料：</span>
          <span class="slope-data__number__sum">5</span>
        </div>
        <p class="slope-data__title">文件</p>
        <ul class="slope-data__content">
          <li
            class="slope-data__content__file"
            v-for="i in dataDisplay"
            :key="i"
            @click="onclickSetIframeSrc(i)"
          >
            {{ i }}
          </li>
        </ul>
      </div>
    </div>
    <el-button style=" pointer-events: all;" type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { dataDisplayData } from "../../../temp/data";
export default {
  name: "DataPopUp",
  data() {
    return {
      dataDisplay: [],
      iframeSrc: "",
      dialogVisible: false,
    };
  },
  created() {
    this.getDisplayDataUrl();
  },
  /**所有方法*/
  methods: {
    getDisplayDataUrl() {
      let data = dataDisplayData();
      data.forEach((d) => {
        let index = d.url.lastIndexOf(".");
        let file = d.url.substr(index);
        this.dataDisplay.push(d.url);
      });
    },

    onclickSetIframeSrc(param) {
      console.log(param);
      this.iframeSrc = param;
      this.dialogVisible = true;
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.dialogVisible = false;
        })
        .catch((_) => {});
    },
  },
};
</script>
<style scoped lang='less'>
.DataPopUp {
  width: 100%;
  height: 100%;
}
.DataPopUp-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: url("/static/img/slope/dataFrame.webp") center no-repeat;
  background-size: 100% 100%;

  .slope-data {
    width: 85%;
    height: 90%;

    &__number {
      width: 100%;
      height: 10%;

      &__text {
        font-size: 16px;
        color: #fff;
      }

      &__sum {
        font-size: 18px;
        color: #5ebfbb;
      }
    }

    &__title {
      height: 10%;
      font-size: 16px;
      font-weight: 400;
      color: #fff;
    }

    &__content {
      height: 80%;
      &__file {
        height: 10%;
        cursor: pointer;
        font-size: 16px;
        color: #5ebfbb;
        pointer-events: all;
      }
    }
  }
}
.dialog {
  height: 50%;
  width: 50%;
}

// <iframe
//   :src="
//     'file:///D:/java-Project/IBMS/ibms-snowy-vision-industrial' + iframeSrc
//   "
//   frameborder="0"
//   width="100%"
//   height="100%"
// >
// </iframe>
</style>
